<template>
  <div class="parent">
    <div class="swiper">
      <mt-swipe :auto="3000" :showIndicators="false">
        <mt-swipe-item class="imgList">
          <img src="../../assets/img/changeImage.jpg" class="img">
          <div class="mark">
            <span class="title">北方13个省市煤改电补贴标准规划及电价政...</span>
            <span class="title">1/3</span>
          </div>
        </mt-swipe-item>
        <mt-swipe-item class="imgList">
          <div @click="goDetail('1')">
            <img src="http://www.hvactt.com/upload/2//article/1546999037300.jpg" class="img">
            <div class="mark">
              <span class="title">北方13个省市煤改电补贴标准规划及电价政...</span>
              <span class="title">2/3</span>
            </div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item class="imgList">
          <div @click="goDetail('2')">
            <img src="http://www.hvactt.com/upload/2//article/1547001404218.jpg" class="img">
            <div class="mark">
              <span class="title">北方13个省市煤改电补贴标准规划及电价政...</span>
              <span class="title">3/3</span>
            </div>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="newList">
      <ul class="list">
        <li class="listItem" v-for="(item, index) in dataList" :key="index" @click="articDetail(item.basicId)">
          <div class="listItemParent">
            <div class="left">
              <span class="title">{{item.basicTitle}}</span>
              <div class="timeName">
                <span class="name">{{item.articleAuthor}}</span>
                <span class="name">{{item.basicUpdateTime}}</span>
              </div>
            </div>
            <div class="right">
              <img :src="'http://www.hvactt.com' + item.basicPic" alt="" class="img"></img>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { Indicator } from 'mint-ui'
export default {
  name: 'consultation',
  data () {
    return {
      dataList: []
    }
  },
  created () {
    Indicator.open('Loading...')
    axios.get('/api/list.do?pageSize=2').then(res => {
      // console.log(res)
      this.dataList = res.data.list
      Indicator.close()
    })
  },
  methods: {
    goDetail (key) {
      this.$router.push({
        path: '/imgDetail',
        query: {
          id: key
        }
      })
    },
    articDetail (id) {
      this.$router.push({
        path: '/imgDetail',
        query: {
          basicId: id
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.parent{
  width: 100%;
  
}
.swiper{
  width: 100%;
  height: 197px;
  margin-top: -1px;
  .imgList{
    width: 100%;
    height: 100%;
    .img{
      width: 100%;
      height: 100%;
    }
    .mark{
      width: 100%;
      height: 22px;
      background:rgba(47,53,62,0.7);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      .title{
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
      }
    }
  }
}
.listItem{
  width: 100%;
  height: 110px;
  border-bottom: 1px solid #f4f4f4;
  .listItemParent{
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    .left{
      width: 80%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: 8px 0;
      padding-right: 10px;
      .title{
        font-size:16px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
      .timeName{
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
      }
    }
    .right{
      width: 110px;
      height: 90px;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
